<template>
	<view>
		<s-layout :title="categoryName" navbar="custom1" :bgStyle="{ ...template.style?.background, color: '#F6F6F6'}" onShareAppMessage>
			<assNavbar >
				<view class="uni-form-item uni-column">			
					<input v-model="state.search" class="input" :placeholder="state.placeholder" @confirm="confirm"/>
				</view>
			</assNavbar>
			
			<!-- 下拉筛选 -->
			<le-dropdown
				v-model:menuList="menuList" 
				themeColor="#3cc51f"
				:duration="300"
				:isCeiling="true"
				@onConfirm="onFilterConfirm"
			></le-dropdown>
			
			<!-- 门店列表 -->
			<view class="ss-m-t-10" v-if="state.list && state.list.length>0">
				<template v-for="(item,index) in state.list" :key="index">
					<s-group-buy-list-custom :data="item" @item-click="itemClick(item)"></s-group-buy-list-custom>
				</template>
			</view>
				
		</s-layout>
	</view>
</template>

<script setup>
//摄影、宠物美容、萌宠训练、宠物殡葬、宠物出行、宠物乐园、宠物寄养、宠物们门店列表页
import {
		computed,
		reactive,
		onBeforeMount,
		ref
	} from 'vue';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import merchantApi from '@/sheep/api/merchant'
import _ from 'lodash'


import assNavbar from '@/components/ass-navbar.vue'
import sGroupBuyListCustom from '@/sheep/components/s-group-buy-list-custom/s-group-buy-list-custom.vue';
import leDropdown from '@/uni_modules/le-dropdown/components/le-dropdown/le-dropdown.vue'


const menuList =  ref([
	{
		title: '全城',
		type: 'filter',
		children: [{title: "区域",type: 'radio',value: null,options: [{label:'全部',value:0},]},]
	},
	{title: '排序',type: 'cell',value: 'mark',options: [{label: "按距离排序",value: 'distance'},{label: "按评分排序",value: 'mark'}]}	
	
]);

const placeholderStyle = ref("font-family: PingFang SC;font-size: 24rpx;color:#D4D4D4;")

//分类id
const categoryId = ref(0);
//分类名称
const categoryName = ref('');

const city_id = ref(-22);

const state = reactive({
	loadStatus: 'more',
	// 页数
	page: 0,
	list: [],
	latitude:30.189728,
	longitude:120.21219,
	
	address:'',
	district_name:'滨江区',
	search:'',
	sort:'mark',
	district_id:'', 
	placeholder:'',
	
})

const template = computed(() => sheep.$store('app').template?.home);

//筛选确认
const onFilterConfirm = (e)=>{
	console.log('onFilterConfirm_---e:',e)
	if(e.title=='全城'){
		state.district_id = e.children[0].value?e.children[0].value:'';
	}else{
		state.sort = e.value;
	}
	console.log("onFilterConfirm--state.sort:",state.sort)
	state.page=0;
	state.loadStatus = 'more'
	getList();
}


//分类点击事件
const itemClick=(e)=>{
	var index = _.findIndex(state.list,{id:e.value});
	var item = state.list[index];
	return sheep.$router.go('/pages/merchant/detail', { id: item.id,name:categorys.value[indexTop.value].name });
}
//输入框确认事件
const confirm=()=>{
	state.page=0;
	state.loadStatus = 'more'
	getList();
}


onReachBottom(()=>{
	 getList();
})

async function getList() {
	
  if (state.loadStatus == 'no-more') return
  
  state.loadStatus = 'loading'
  
  var filter = { 
	  service_category_id:'all',
	  keyword:state.search,
	  // district_id:state.district_id,
	  tag:categoryName.value,
	  sort:state.sort,
	  page: state.page + 1,
	}
  
  
  const { data } = await merchantApi.merchantList(filter)
  

  if (!data||!data.data) {
    state.loadStatus = 'no-more'
    return
  }
 
  state.page = data.current_page
  
  data.data.forEach(function (value,index) {
	  value.score = Math.floor(value.score);
	  value.num = 5-Math.floor(value.score);
	  data.data[index] = value;
	});
  
	let list = data.data;
  
  if (state.page <= 1) {
    state.list = list
  } else {
    state.list.push(...list)
  }
  
  state.loadStatus = (list.length >= 10 && data.total != state.list.length) ? 'more' : 'no-more'
}

const getdistrictList=async()=>{
	const {error, data } = await sheep.$api.data.getDistrict(city_id.value);
	
	var data_new = [];

	if(data && data.length>0){
		
		data_new = _.map(data,function(item,index){
			return {label:item.name,value:item.id}
		})
	
		menuList.value[0].children[0].options = data_new;
		
	}
	
}

onLoad(async(option)=>{
	
	let district = uni.getStorageSync('district');

	if(district){
		city_id.value = district.pid;
		await getdistrictList();
	}

	console.log("items:--city_id:value:",city_id.value);
	
	
	if(option.title){
		categoryId.value = option.id||'';
		categoryName.value = option.title;
		state.placeholder = option.title;
		await getList();
	}
	
	
})

</script>

<style>
.input{
	background-color:#E8E8E8;
	height:60rpx;
	width:420rpx;
	margin-left:20rpx;
	border-radius:30rpx;
					
}
.search{
		background: #E8E8E8;
		height:80rpx;
		width:420rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<style lang="scss" scoped>
	
</style>
